<script setup lang="ts">
import {
    Folder,
    Guide,
    Sugar
} from '@element-plus/icons-vue'
import { onMounted, reactive } from 'vue'

const props = defineProps({
    menus: {
        type: Array<Collection>,
        default: () => []
    },
    count: {
        type: Number,
        default: 0
    }
})

const collection = reactive({
    webview: null as any,
    videos: [
        {
            title: '哔哩哔哩',
            url: 'https://www.bilibili.com/'
        },
        {
            title: '腾讯视频',
            url: 'https://v.qq.com/'
        },
        {
            title: '爱奇艺视频',
            url: 'https://www.iqiyi.com/'
        },
        {
            title: '优酷视频',
            url: 'https://www.youku.com/'
        },
        {
            title: '芒果TV',
            url: 'https://www.mgtv.com/'
        },
        {
            title: '抖音 - 推荐',
            url: 'https://www.douyin.com/?recommend=1'
        }
    ],
    others: []
})

onMounted(() => {
    collection.webview = document.getElementById('website') as HTMLWebViewElement
})
</script>
<template>
    <el-row class="collection" justify="space-between">
        <el-button-group size="small">
            <el-dropdown popper-class="popup-dropdown">
                <el-button text :icon="Folder">视频</el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="video in collection.videos"
                            @click="collection.webview.src = video.url">
                            {{ video.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown popper-class="popup-dropdown" :disabled="props.menus?.length <= 0">
                <el-button text :icon="Folder" :disabled="props.menus?.length <= 0">收藏</el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="menu in props.menus" @click="collection.webview.src = menu.url">
                            {{ menu.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-button-group>
        <el-button-group size="small">
            <el-popover popper-class="popup-dropdown" class="box-item" title="今日摸鱼人数" width="300" trigger="click">
                <template #default>
                    该数据只由“广告网站”提供，与本应用内访问的网站无关，实现不同且相对隔离。
                </template>
                <template #reference>
                    <el-button text :icon="Guide">今日在线 {{ props.count }} 人</el-button>
                </template>
            </el-popover>
            <el-popover popper-class="popup-dropdown" class="box-item" title="打赏作者" width="220" trigger="click">
                <template #default>
                    <el-text tag="b">！！注意，这不是收款码！！</el-text><br />
                    <el-text tag="mark">有大额红包时别忘了我呀，谢谢老板 ✧*｡ (ˊᗜˋ*) ✧*</el-text>
                    <img src="../../assets/images/qrcode.jpg" style="width: 100%; margin-top: 5px;" alt="打赏码" />
                </template>
                <template #reference>
                    <el-button text :icon="Sugar">打赏作者</el-button>
                </template>
            </el-popover>
        </el-button-group>
    </el-row>
</template>
<style lang="scss" scoped>
.collection {
    padding: 5px;
    background-color: #fff;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
}
</style>